import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card,  Input, Select, Button, Table,Divider,Tag,message,Modal  } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './SeekList.less';

const Search = Input.Search;

@connect(state => ({
  seekHelp: state.seekHelp,
}))
export default class SeekList extends PureComponent {
  state = {
    rsId:1,
    pageNo:1,
    pageSize:10,
    total:0,
    seekListData:[],
    selectedRows: [],
    formValues: {},
  };

  componentDidMount() {
    this.loadSeekInfo()
  }

  loadSeekInfo(searchText){
    const { dispatch } = this.props;
    const { pageNo,pageSize,rsId } = this.state;
    // 需要传递的参数信息
    const params = {
      pageNo: pageNo,
      pageSize: pageSize,
      rsId:rsId
    };
    if(searchText) params.searchText=searchText;
    dispatch({
      type: 'seekHelp/getSeekHelp',  //请求的action
      payload:params,
      callback:(data) =>{
        this.setState({
          seekListData: data.list,
          pageNo:data.pageNo,
          pageSize:data.pageSize,
          total:data.total,
        });
      }
    });

  }

  handleSearch = (value) => {
    this.loadSeekInfo(value)
  }

  handleTableChange = (page, pageSize) => {
    this.state.pageNo = page;
    this.setState({
      pageNo:page,
      pageSize:pageSize
    });
    this.loadSeekInfo();
  }

  onOpenSeekHelpAddForm = () => {
    const { dispatch} = this.props;
    dispatch({
      type: 'seekHelp/seekHelpAddForm',
    });
  }

  turnToSeekHelpAddPage(id,showDetail){
    const { dispatch} = this.props;

    if(id) {
      const param = {
        seekHelpId:id
      }
      if(showDetail){
        param.showDetail = showDetail;
      }
      dispatch({
        type: 'seekHelp/seekHelpAddForm',
        payload:param
      });
    }else{
      dispatch({
        type: 'seekHelp/seekHelpAddForm'
      });
    }
  }

  delSeekInfo (id){
    const { dispatch } = this.props;
    const params = {
      helpId:id,
      delStatus:1
    };

    Modal.confirm({
      title: '提示',
      content: '您确定删除该求助吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: 'seekHelp/fetchDelSeekHelpInfo',  //请求的action
          payload: params,
          callback: (response) => {
            if(response.errorCode != 0){
              this.loadSeekInfo()
            }
            message.success(response.msg)
          }
        });
      }
    })
  }

  render() {
    const { seekListData,pageSize ,total,pageNo} = this.state;

    const columns = [
      {
        title: '标题',
        dataIndex: 'seekTitle',
        width:'20%'
      },
      {
        title: '求助内容',
        dataIndex: 'seekDes',
        width:'60%'
      },
      {
        title: '处理状态',
        dataIndex: 'dealStatus',
        width:'5%',
        render: (text, record) => {
          if(text == 1){
            return <Tag color="green">已解决</Tag>
          }else{
            return <Tag color="red">未解决</Tag>
          }
        }
      },
      {
        title: '操作',
        width:'15%',
        render: (text, record) => (
          <div>
            <a href="javascript:void(0)" onClick={() => this.turnToSeekHelpAddPage(record.id,false)} >详情</a>
            <Divider type="vertical" />
            <a href="javascript:void(0)" onClick={() => this.turnToSeekHelpAddPage(record.id,true)} >编辑</a>
            <Divider type="vertical" />
            <a href="javascript:void(0)" onClick={() => this.delSeekInfo(record.id)} >删除</a>
          </div>
        ),
      },
    ];

    const extraCard = (
      <div>
        <Search
          placeholder="请输入求助标题"
          onSearch={(value) => this.handleSearch(value)}
          style={{ width: 200 }}
          enterButton
        />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Button icon="plus" type="primary" onClick={() => this.onOpenSeekHelpAddForm()}> 登记 </Button>
      </div>
    )

    const paginationProps = {
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };

    return (
        <Card title="求助信息列表"  extra={extraCard}>
          <div className={styles.tableList}>
            <Table dataSource={seekListData} columns={columns} style={{ width: '100%' }}
                   pagination={paginationProps}  />
          </div>
        </Card>
    );
  }
}
